<template>
  <div class="svgs-wrap">
    <el-input
      v-model="keyword"
      @input="handleSearch"
      class="search-input"
      placeholder="请输入关键字搜索图标"
    >
      <template #prefix>
        <adv-icon icon="search"></adv-icon>
      </template>
    </el-input>
    <div
      v-for="item in resultList"
      :key="item"
      class="svg-item"
      v-copy="{ content: `<adv-icon :icon=&quot;${item}&quot;></adv-icon>` }"
    >
      <adv-icon :icon="item"></adv-icon>
      <div class="svg-name">{{ item }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { svgs } from "leisure-lib";
import { onMounted, ref } from "vue";

const svgList = ref([]);
const resultList = ref([]);
const keyword = ref("");
const handleSearch = (ev) => {
  console.log("🚀 ~ handleSearch ~ ev:", ev);
  resultList.value = svgList.value.filter((item) => item.includes(ev));
};

onMounted(() => {
  svgList.value = Object.entries(svgs).reduce((prev, [path]) => {
    prev.push(path.slice(path.lastIndexOf("/") + 1, path.lastIndexOf(".")));
    return prev;
  }, []);

  resultList.value = svgList.value;
});
</script>

<style lang="less" scoped>
.svgs-wrap {
  display: flex;
  flex-wrap: wrap;

  .search-input {
    margin: calc(var(--margin-base) * 4) calc(var(--margin-base) * 16)
      calc(var(--margin-base) * 4) 0;
  }
  .svg-item {
    border: 1px solid var(--color-border);
    cursor: pointer;
    text-align: center;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    will-change: all;
    .icon {
      font-size: 2em;
    }
    &:hover {
      .icon {
        scale: 1.8;
        transition: 0.5s;
      }
    }
    .svg-name {
      text-align: center;
      margin-top: calc(var(--padding-base) * 4);
    }
  }
}
</style>
